<template>
  <div class="easy-container flex align-items-center">
    <div class="cell flex-1 info-deep no-warp-ellipsis-line2">
      {{ note.desc1 }}
      <router-link
        class="title link"
        :to="note.root.path"
        :title="note.root.title"
        target="_blank"
        @click.native="readNote"
      >
        {{ linkShow(note.root.title) }}
      </router-link>
      {{ note.desc2 }}
      <router-link
        v-if="note.desc3Path"
        class="title link"
        :to="note.desc3Path"
        target="_blank"
        @click.native="readNote"
      >
        {{ note.desc3 }}
      </router-link>
    </div>
    <timeago class="cell shrink-0" :date-time="curNote.created_at"
             enable-type="auto" :time-format="['date','time']"/>
    <div class="cell flex align-items-center">
      <el-button
        size="small"
        :type="curNote.read ? 'warning' : 'success'"
        @click="readNote"
        :loading="isLoading"
      >
        {{ curNote.read ? '标记为未读' : '标记为已读' }}
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OtherNoteItem',
  props: {
    note: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      curNote: JSON.parse(JSON.stringify(this.note)),
      isLoading: false, // 正在修改状态
    };
  },
  methods: {
    // 截取一部分
    linkShow(content) {
      if (content.length > 20) return `${content.substring(0, 20)}...`;
      return content;
    },
    // 设置当前为已读
    readNote() {
      this.isLoading = true;
      this.$api.notifications.read({
        notesId: [this.curNote.id],
        read: !this.curNote.read,
      }).then(() => {
        this.$set(this.curNote, 'read', !this.curNote.read);
        this.$root.$emit('updateUnreadCount');
      }).catch(() => {})
        .then(() => { this.isLoading = false; });
    },
  },
};
</script>

<style></style>
